<template>
    <div>

        <el-container>
            <!-- 角色树 -->
      <el-aside width="200px">
      <!-- 角色 -->
  <el-tree-v2
      style="max-width: 600px"
      :data="roleData"
      :props="defaultProps"
      :height="208"
      @node-click="handleNodeClick"
    />
      </el-aside>
      <el-container>
        
        <el-main>
            <!-- 菜单权限树 -->
            <el-tree
      ref="deptreeRef"
      style="max-width: 600px"
      :data="menuData"
      show-checkbox
      default-expand-all
      node-key="value"
      highlight-current
      :props="defaultProps2"
       @check-change="getChecked"
      />

      <el-button style="margin-top: 60px;" type="success" @click="save()">保存</el-button>
        </el-main>
      </el-container>
    </el-container>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import {axios} from '@/axios/axiosHelp'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { ElTree } from 'element-plus'
const router = useRouter()



onMounted(()=>{
    getRoleData()
    getMenuData()
})


//角色树显示

const defaultProps = {
  children: 'children',
  label: 'roleName',
  roleId:"",
}


const roleData = ref([])
const getRoleData=()=>{
    axios.get('http://localhost:7081/api/User/QueryRole').then(res=>{
        roleData.value = res.data.data
    })
}




//菜单权限树
const defaultProps2 = {
    children: 'children',
    label: 'label',
    value:'value'
}
const menuData = ref([])
const getMenuData=()=>{
    axios.get('http://localhost:7081/api/User/QueryRoleMenu?Pid=0').then((res=>{
        menuData.value = res.data.data
    }))
}



const rolevalue=ref()
const menuvalue=ref([])

const deptreeRef:any=ref([])

const handleNodeClick = (data:any) => {
  rolevalue.value = data.roleId;
  axios({
    url: 'http://localhost:7081/api/User/FindMenu',
     method: 'get',
     params: {
      RoleId:rolevalue.value,
    }
    
   }).then((res) => {
    console.log(rolevalue.value)
     menuvalue.value = res.data.data.map((item: any) => item.menuId)
      deptreeRef.value?.setCheckedKeys(menuvalue.value)
      console.log("111"+menuvalue.value)
  })

}

const getChecked = () => {

menuvalue.value = deptreeRef.value.getCheckedNodes().map((node: any) => node.value);
console.log(menuvalue.value)
}

//添加
const save=()=>{
    //先批量删除
    axios.delete('https://localhost:7181/api/User/DelRangeRoleMenu',{
        params:{
            RoleId:rolevalue.value
        }
    }).then((res=>{
           
    }))

    //再批量添加
    axios.post('https://localhost:7181/api/User/Handle',{
        roleId:rolevalue.value,
        menuIds:menuvalue.value
    }).then((res=>{
        if(res.data.code==100){
            console.log("添加时取到的菜单id"+menuvalue.value)
           ElMessage.success(res.data.msg)
           getRoleData()
           getMenuData()
        }
    }))
}

</script>

<style scoped>

</style>